import React, { useState, useEffect } from 'react'
import { Layout, Menu } from 'antd';
import { AppstoreOutlined, MailOutlined,ReadOutlined,ProfileOutlined,FileOutlined,FileDoneOutlined,FileExcelOutlined,
    DesktopOutlined,BarcodeOutlined,TeamOutlined,ToolOutlined, UserOutlined,SnippetsOutlined,ImportOutlined, SettingOutlined,HomeOutlined,SlidersOutlined } from '@ant-design/icons';
import './index.css'
import axios from 'axios'
//高阶组件
import { withRouter } from 'react-router-dom'
import {connect} from 'react-redux'
const { Sider } = Layout;

const iconList = {
    "/home": <HomeOutlined />,
    "/user-manage": <AppstoreOutlined />,
    "/user-manage/list": <UserOutlined />,
    "/right-manage/role/list": <TeamOutlined />,
    "/right-manage/right/list": <SlidersOutlined />,
    "/news-manage":<SnippetsOutlined />,
    "/news-manage/add": <SettingOutlined />,
    "/right-manage":<ToolOutlined />,
    "/audit-manage":<DesktopOutlined />,
    "/audit-manage/audit":<ReadOutlined />,
    "/audit-manage/list":<ProfileOutlined />,
    "/publish-manage":<ImportOutlined />,
    "/news-manage/draft":<MailOutlined />,
    "/news-manage/category":<BarcodeOutlined />,
    "/publish-manage/unpublished":<FileOutlined />,
    "/publish-manage/published":<FileDoneOutlined />,
    "/publish-manage/sunset":<FileExcelOutlined />

}

function SideMenu(props) {
    //被选中的key值
    const selectKeys = [props.location.pathname];
    //被选中打开的菜单项
    const openKeys=["/" +props.location.pathname.split("/")[1]]
    // console.log(selectKeys);
    // 菜单列表
    const [menu, setMenu] = useState([]);
    //菜单列表接口数据
    useEffect(() => {
        axios.get('/rights?_embed=children').then(res => {
            // console.log(res.data);
            setMenu(res.data)
        })
    }, [])
    //菜单是否合起来
    // const [collapsed] = useState(false);
    const {role:{rights}} = JSON.parse(localStorage.getItem("token"))
    //判断菜单项是否显示
    const checkPagePermission = (item) => {
        // if(item.key==='/home'){
        //     return true
        // }
        return item.pagepermisson===1 && rights.includes(item.key)
    }
    const renderMenu = (menuList) => {
        // 遍历数组渲染数据
        return menuList.map(item => {
            // 渲染子列表 
            if (item.children?.length>0 && checkPagePermission(item)) {
                // console.log(item);
                return (
                    <Menu.SubMenu key={item.key} icon={iconList[item.key]} title={item.title}>
                        {renderMenu(item.children)}
                    </Menu.SubMenu>
                )
            }
            // 渲染列表
            return checkPagePermission(item) && <Menu.Item key={item.key} icon={iconList[item.key]} onClick={() => {
                props.history.push(item.key)
                // console.log(props);
            }}>{item.title}</Menu.Item>
        })
    }
    return (
        <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
            <div style={{ display: 'flex', height: '100%', "flexDirection": 'column' }}>
                <div className="logo" style={{display: props.isDisplay}}>全球新闻发布管理系统</div>
                <div style={{flex:1,"overflow":"auto"}}>
                    <Menu
                        defaultOpenKeys={openKeys}
                        theme="light"
                        selectedKeys={selectKeys}
                        mode="inline"
                    >
                        {renderMenu(menu)}
                    </Menu>
                </div>
            </div>
        </Sider>
    )
}
const mapStateToProps=({CollAspedReducer:{isCollapsed,isDisplay}})=>{
    // console.log(state);
    return {
        isCollapsed,
        isDisplay
    }
}
const mapDispatchToProps={
    changeCollapesd(){
        return {
            type:"change_collapsed",
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(SideMenu))